<template>
	<div v-if="navType == 'scjd'" class="screen-nav sc-nav">
		<div class="screen-nav-title">坞城市场监督管理平台</div>
	</div>
	<!-- 顶部tab栏 -->
	<div v-else class="screen-nav">
		<h1>
			<router-link :to="defaultLink()" class="title">{{ title }}</router-link>
		</h1>
		<ul class="nav">
			<!-- <li v-for="route in routes"><router-link :to="route.path">{{ route.meta.title }}</router-link></li> -->
			<li v-for="(route, index) in routes" :key="index">
				<router-link :to="routesLink(route.link)">{{ route.title }}</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
import { HomeDb } from '@/api'

export default {
	name: 'ScreenNav',
	props:{
		navType: {
			type: String,
			required: false,
		},
	},
	created() {
		console.info(this.$route.fullPath.includes('/by'))
		if (this.$route.fullPath.includes('/by')) {
			this.title = '北营街道城市运行管理服务平台'
			this.prefixRoute = '/by'
		} else {
			this.title = '小店区城市运行管理服务平台'
			this.prefixRoute = null
		}
	},
	data() {
		return {
			routes: [],
			title: '',
			prefixRoute: null
		}
	},
	computed: {
		defaultLink() {
			return () => {
				if (this.prefixRoute) {
					return this.prefixRoute + '/default'
				} else {
					return '/default'
				}
			}
		},
		routesLink() {
			return (link) => {
				if (this.prefixRoute) {
					return this.prefixRoute + link
				} else {
					return link
				}
			}

		}
	},
	mounted() {
		this.getRoutes();
	},
	methods: {
		getRoutes() {

			HomeDb.getOaMenuConfig().then(res => {
				if (res.code == 200) {
					let data = res.data;
					this.routes = data.filter(item => item.link != 'default')
				}

			})
		}
	},
}
</script>

<style lang="less" scoped>
.screen-nav {
	background: url(../../assets/images/layout/top.png) no-repeat 0 0;
	width: 100%;
	height: 8.5rem;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1987;
	display: flex;
	align-items: center;
}
.sc-nav {
	background: url(../../assets/images/layout/sc-top.png) no-repeat;
	background-position: center center;
	.screen-nav-title {
		width: 100%;
		font-size: 4rem;
		margin-top: -1rem;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #EFF6FF;
		background: linear-gradient(1deg, #D4E7EE 0%, #F9FEFF 99.0478515625%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
	}
}

.title {
	margin: 0 2rem;
	font-size: 3.4rem;
	background-image: -webkit-linear-gradient(top, #20A8FF, #26FFED);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}



.nav {
	display: flex;
	margin-left: 26.4rem;

	li {
		margin: 0 2rem;
	}


	a {
		color: rgba(255, 255, 255, .5);
		font-size: 2.2em;
		position: relative;

		&:after {
			content: '';
			display: block;
			width: 0;
			height: 0.4rem;
			background: #00DCFF;
			border-radius: 0.2rem;
			position: absolute;
			bottom: -1rem;
			left: 50%;
			margin-left: -1.8rem;
			transition: all .5s ease;
		}
	}

	.router-link-active {
		color: #00DCFF;
		font-weight: bold;

		&::after {
			width: 3.6rem;
		}
	}
}
</style>

